<template>
  <div class="product-list">
    <el-collapse-transition>
      <div v-show="productMode==='list'">
        <div class="fl">
          <ShopListMenu @emitShopId="emitShopId" />
        </div>

        <div v-if="shopId" class="left-container">
          <!-- 标题 tab  -->
          <div class="head">
            <div class="app-main-top-box">
              <div class="title">{{ shopName?shopName:'' }}</div>
              <el-dropdown
                v-if="!$store.getters.banBtnList.includes('MCH_BTN_BK_PRODUCT_ADD')"
                split-button
                type="primary"
                size="medium"
                @click="changeProductMode({productMode:'add'})"
              >
                新增资源
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <div @click="openDialogProductList">从已有资源导入配置添加</div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div class="app-main-tips-box">
              <div class="title">
                <i class="el-icon-warning" /> 资源添加时设置的是基础价格，如果需要动态控制价格请前往价格和库存管理设置。
              </div>
            </div>
            <div class="tab">
              <el-tabs v-model="tabName">
                <el-tab-pane v-if="!$store.getters.banBtnList.includes('MCH_TAB_BK_FD_RESOURCE_MANAGE')" label="全日房" name="0" />
                <el-tab-pane v-if="!$store.getters.banBtnList.includes('MCH_TAB_BK_HR_RESOURCE_MANAGE')" label="钟点房" name="1" />
                <el-tab-pane v-if="!$store.getters.banBtnList.includes('MCH_TAB_BK_KTV_RESOURCE_MANAGE')" label="KTV" name="2" />
              </el-tabs>
            </div>
          </div>

          <div class="content app-main-content-box">
            <ProductList
              ref="productList"
              :shop-id="shopId"
              :tab-name="tabName"
              @changeProductMode="changeProductMode"
            />
          </div>
        </div>
      </div>
    </el-collapse-transition>

    <!-- 价格管理 -->
    <el-collapse-transition>
      <EditProductPrice
        v-if="productMode==='price'&&productId"
        :product-type="tabName"
        :shop-id="shopId"
        :product-id="productId"
        :product-mode="productMode"
        @changeProductMode="changeProductMode"
      />
    </el-collapse-transition>

    <!-- 商品管理 -->
    <el-collapse-transition>
      <EditProductInfo
        v-if="productMode==='add'||(productMode==='edit'||productMode==='copy')&&productId"
        :product-type="tabName"
        :shop-id="shopId"
        :product-id="productId"
        :product-mode="productMode"
        @changeProductMode="changeProductMode"
      />
    </el-collapse-transition>

    <!-- 弹框选择资源 -->
    <DialogProductList ref="dialogProductList" />
  </div>
</template>

<script>
import ProductList from './components/ProductList'
import DialogProductList from './components/DialogProductList'
import EditProductInfo from './components/EditProductInfo'
import EditProductPrice from './components/EditProductPrice'
export default {
  components: {
    ProductList,
    DialogProductList,
    EditProductInfo,
    EditProductPrice
  },
  data() {
    return {
      // 配置
      tabName: '0',
      // 数据
      productId: '', // 当前编辑商品id
      productMode: 'list', // 页面模式  list  copy edit add price
      shopId: '',
      shopName: ''
    }
  },
  mounted() {
    if (
      !this.$store.getters.banBtnList.includes('MCH_TAB_BK_FD_RESOURCE_MANAGE')
    ) {
      this.tabName = '0'
    } else if (
      !this.$store.getters.banBtnList.includes('MCH_TAB_BK_HR_RESOURCE_MANAGE')
    ) {
      this.tabName = '1'
    } else if (
      !this.$store.getters.banBtnList.includes('MCH_TAB_BK_KTV_RESOURCE_MANAGE')
    ) {
      this.tabName = '2'
    }
  },
  methods: {
    /**
       * 获取数据
       */
    // 获取列表

    /**
       * 按钮组
       */
    // 选中门店
    emitShopId(item) {
      this.shopId = item.shopId
      this.shopName = item.shopName
      this.changeProductMode({ productMode: 'list' })
    },

    // 打开商品列表
    openDialogProductList() {
      this.$refs.dialogProductList
        .open({
          shopId: this.shopId,
          tabName: this.tabName
        })
        .then(res => {
          this.changeProductMode(res)
        })
    },

    // 当前模式
    changeProductMode({
      productMode,
      productId = '',
      refresh = false,
      productType = '0'
    }) {
      this.productMode = productMode
      this.productId = productId
      if (refresh) {
        this.tabName = String(productType)
        this.$refs.productList.initData()
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .product-list {
    /* 左边 */
    .left-container {
      overflow: hidden;
    }

    /*  头部 */
    .head {
      padding: 24px 30px 0;
      border-radius: 5px;
      background-color: #fff;
      /* tab */
      .tab ::v-deep {
        .el-tabs__header {
          margin-bottom: 0;
          background-color: #fff;
          border-radius: 0 0 5px 5px;
        }
        .el-tabs__nav-wrap::after {
          background-color: #fff;
        }
        .el-tabs__active-bar {
          height: 4px;
        }
      }
    }

    /* 内容 */
    .content {
      margin-top: 10px;
    }
  }
</style>
